<template>
  <div>
    <c-table-box ref="cTableBox" hide-func checkbox :other-filters="otherFilters" :table-config="tableConfig" @selection-change="selectionChange">
      <template #btn>
        <c-permission v-if="type==='all'" code="all">
          <c-button type="primary" opt-code="add" @click="clickToRouterHandle('DecorateAddEdit')">新增申请</c-button>
          <c-button type="primary" opt-code="addTask" @click="toRouteWithId('DecorateTaskAdd', '新增任务')">新增任务</c-button>
          <Cancellation :sel-data="selections" opt-code="cancel" @on-success="refreshTableData" />
          <c-button type="primary" opt-code="picUndecoration" @click="toRouteWithId('DecorateNoDecoration', '出图不装修')">出图不装修</c-button>
          <c-button type="primary" opt-code="nodecoration" @click="toRouteWithId('DecorateNoDecoration', '出图不装修',1)">出图不装修</c-button>

          <Supervision :sel-data="selections" opt-code="changeSupervisor" @on-success="refreshTableData" />
          <c-button type="primary" opt-code="import" @click="importVisible=true">导入</c-button>
          <c-button type="primary" opt-code="export" @click="exportVisible=true">导出</c-button>
          <Postpone :sel-data="selections" opt-code="AppDelay" @on-success="refreshTableData" />
        </c-permission>
        <c-permission v-else-if="type==='apply'" code="submit">
          <c-button type="primary" opt-code="edit" @click="toRouteWithId('DecorateAddEdit', '编辑')">编辑</c-button>
          <c-button type="primary" opt-code="del" @click="clickRemoveHandle">删除</c-button>
        </c-permission>
        <c-permission v-else-if="type==='exceptionPulse'" code="exceptionPulse">
          <c-button type="primary" opt-code="resumeException" @click="handelCancelException">异常恢复</c-button>
        </c-permission>
      </template>
    </c-table-box>
    <import-files
      v-if="importVisible"
      title="导入"
      :visible.sync="importVisible"
      :config="fileImportConfig"
      @success="handleImportSuccess"
    />
    <export-files
      v-if="exportVisible"
      title="导出"
      :config="exportConfig"
      :visible.sync="exportVisible"
      @success="handleExportSuccess"
    />
  </div>
</template>
<script>
import { otherFiltersItem } from '@/utils'
import Cancellation from './cancellation'
import Supervision from './supervision'
import Postpone from './postpone'
import { deleteLogicDeleteById, resumeException } from '@/api/decorate'
export default {
  name: 'List',
  components: {
    Cancellation,
    Supervision,
    Postpone
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    activeType: {
      type: String,
      default: ''
    },
    serachFilters: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      exportVisible: false,
      importVisible: false,
      tableConfig: {
        interfacePath: '/slm-admin/api/v1/shopDecoration/pageSelect',
        hideFuncBar: true,
        sort: 'createTime',
        setting: [],
        apiHeader: {
          'Permission-perCode': 'task',
          'Permission-App': 'slm'
        }
      },
      allSetting: [
        {
          prop: 'constCode',
          label: '门店建设项目号',
          width: 180
        },
        {
          prop: 'decorationTaskCode',
          label: '装修任务号',
          width: 200,
          className: 'btn-green',
          isButton: true,
          clickFun: this.toDetail
        },
        {
          prop: 'nature',
          label: '装修性质',
          minWidth: 120,
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'DECORATION_NATURE'
          }
        },
        {
          prop: 'expectApplyReportTime',
          label: '装修申请预计提报时间',
          formatData: this.$parseTimeYMD('expectApplyReportTime'),
          minWidth: 120
        },
        {
          prop: 'shopName',
          label: '所属门店',
          minWidth: 120
        },
        {
          prop: 'clientName',
          label: '所属客户',
          minWidth: 120
        },
        {
          prop: 'officeName',
          label: '所属办事处',
          minWidth: 120
        },
        {
          prop: 'range',
          label: '装修范围',
          minWidth: 100,
          render: (h, r) => {
            return h('c-dict-range-view', { props: { dictTypeCode: 'DECORATION_RANGE', value: r.range }})
          }
        },
        {
          prop: 'schedule',
          label: '装修进度',
          minWidth: 100,
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'DECORATION_SCHEDULE'
          }
        },
        {
          prop: 'steps',
          label: '装修步骤',
          minWidth: 100,
          propEnum: {
            appCode: 'slm',
            domainCode: 'marketing',
            dictTypeCode: 'SHOP_DECORATION_STEPS'
          }
        },
        {
          prop: 'state',
          label: '装修状态',
          minWidth: 100,
          propEnum: {
            appCode: 'slm',
            domainCode: 'marketing',
            dictTypeCode: 'SHOP_DECORATION_STATE'
          }
        },
        {
          prop: 'shopDecorationArea',
          label: '卖场装修区域',
          minWidth: 140,
          render: (h, row) => {
            return h('c-design-area', { props: { value: row.shopDecorationArea }})
          }
        },
        {
          prop: 'shopDecorationTotalArea',
          label: '卖场装修面积',
          minWidth: 140
        },
        {
          prop: 'isApplyReportOutTime',
          label: '装修申请是否超期',
          minWidth: 160,
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'BOOLEANS'
          }
        },
        {
          prop: 'isOutTimeUnaccept',
          label: '验收申请是否超期',
          minWidth: 160,
          propEnum: {
            appCode: 'slm',
            domainCode: 'marketing',
            dictTypeCode: 'BOOLEANS'
          }
        },
        {
          prop: 'constUnitName',
          label: '施工单位',
          minWidth: 100
        },
        {
          prop: 'principal',
          label: '施工负责人',
          minWidth: 100
        },
        {
          prop: 'proSupervisorName',
          label: '工程监理',
          minWidth: 100
        },
        {
          prop: 'marketType',
          label: '报图类型',
          minWidth: 100,
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'MARKET_TYPE'
          }
        },
        {
          prop: 'constType',
          label: '门店建设类型',
          minWidth: 120,
          propEnum: {
            appCode: 'slm',
            domainCode: 'marketing',
            dictTypeCode: 'CONST_TYPE'
          }
        },
        {
          prop: 'dataFrom',
          label: '数据来源',
          minWidth: 100,
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'DECORATION_DATA_FROM'
          }
        },
        {
          prop: 'expectEndTime',
          label: '预计完工时间',
          width: 180
        }
      ],
      applySetting: [
        {
          prop: 'constCode',
          label: '门店建设项目号',
          width: 180
        },
        {
          prop: 'decorationTaskCode',
          label: '装修任务号',
          width: 200,
          className: 'btn-green',
          isButton: true,
          clickFun: this.toDetail
        },
        {
          prop: 'nature',
          label: '装修性质',
          minWidth: 120,
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'DECORATION_NATURE'
          }
        },
        {
          prop: 'shopName',
          minWidth: 120,
          label: '所属门店'
        },
        {
          prop: 'clientName',
          label: '所属客户',
          width: 120
        },
        {
          prop: 'officeName',
          minWidth: 120,
          label: '所属办事处'
        },
        {
          prop: 'range',
          label: '装修范围',
          minWidth: 120,
          render: (h, r) => {
            return h('c-dict-range-view', { props: { dictTypeCode: 'DECORATION_RANGE', value: r.range }})
          }
        },
        {
          prop: 'schedule',
          label: '装修进度',
          minWidth: 100,
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'DECORATION_SCHEDULE'
          }
        },
        {
          prop: 'steps',
          minWidth: 120,
          label: '装修步骤',
          propEnum: {
            appCode: 'slm',
            domainCode: 'marketing',
            dictTypeCode: 'SHOP_DECORATION_STEPS'
          }
        },
        {
          prop: 'state',
          minWidth: 120,
          label: '装修状态',
          propEnum: {
            appCode: 'slm',
            domainCode: 'marketing',
            dictTypeCode: 'SHOP_DECORATION_STATE'
          }
        },
        {
          prop: 'isApplyReportOutTime',
          label: '装修申请是否超期',
          minWidth: 140,
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'BOOLEANS'
          }
        },
        {
          prop: 'isOutTimeUnaccept',
          label: '验收申请是否超期',
          minWidth: 120,
          propEnum: {
            appCode: 'slm',
            domainCode: 'marketing',
            dictTypeCode: 'BOOLEANS'
          }
        },
        {
          prop: 'constUnitName',
          label: '施工单位',
          minWidth: 120
        },
        {
          prop: 'principal',
          label: '施工负责人',
          minWidth: 120
        },
        {
          prop: 'proSupervisorName',
          label: '工程监理',
          minWidth: 120
        },
        {
          prop: 'marketType',
          label: '报图类型',
          minWidth: 120,
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'MARKET_TYPE'
          }
        },
        {
          prop: 'constType',
          label: '门店建设类型',
          minWidth: 120,
          propEnum: {
            appCode: 'slm',
            domainCode: 'marketing',
            dictTypeCode: 'CONST_TYPE'
          }
        },
        {
          prop: 'expectEndTime',
          label: '预计完工时间',
          width: 180
        }
      ],
      typeFilters: [],
      selections: []
    }
  },
  computed: {
    otherFilters() {
      return [...this.serachFilters, ...this.typeFilters]
    },
    exportConfig() {
      return [{
        code: 'export',
        name: '门店装修任务管理',
        dataApi: '/slm-admin/api/v1/shopDecoration/export',
        selectedRows: this.selections,
        paramsRaw: {},
        filtersRaw: this.otherFilters,
        queryField: 'id',
        headers: {
          'Permission-perCode': 'task',
          'Permission-App': 'slm'
        }
      }]
    },
    fileImportConfig() {
      return [{
        code: 'import',
        name: '门店装修任务管理',
        apiUrl: '/slm-admin/api/v1/shopDecoration/importExcel',
        selectedRows: this.selections,
        paramsRaw: {},
        filtersRaw: this.otherFilters
      }]
    }
  },
  watch: {
    type: {
      handler(v) {
        this.setOtherFilters(v)
        this.setTableSetting(v)
      },
      immediate: true
    },
    serachFilters: {
      handler(v) {
        if (this.activeType !== this.type) return
        this.$nextTick(() => {
          this.$refs.cTableBox.initTableData()
        })
      }
    }
  },
  created() {
  },
  activated() {
    if (this.ready && this.refreshTableData) {
      this.refreshTableData()
    }
  },
  deactivated() {
    this.ready = true
  },
  methods: {
    // 设置table setting
    setTableSetting(v) {
      switch (v) {
        case 'all':
          this.$set(this.tableConfig, 'setting', this.allSetting)
          break
        case 'apply':
          this.$set(this.tableConfig, 'setting', this.applySetting)
          break
        case 'exceptionPulse':
          this.$set(this.tableConfig, 'setting', this.allSetting)
          break
      }
    },
    // 设置过滤条件
    setOtherFilters(v) {
      switch (v) {
        case 'all':
          this.typeFilters = []
          break
        case 'apply':
          this.typeFilters = [
            otherFiltersItem('steps', 'A1', '='),
            // 除全部页签，其余全展示正常
            otherFiltersItem('state', 'A', '='),
            otherFiltersItem('isEnd', '0', '=')
          ]
          break
          // 异常恢复
        case 'exceptionPulse':
          this.typeFilters = [otherFiltersItem('state', 'D', '=')]
          break
      }
    },
    selectionChange(v) {
      this.selections = v
    },
    // 删除
    clickRemoveHandle() {
      if (!this.singleJudge(this.selections, '删除', true)) {
        return
      }
      if (this.selections[0].dataFrom === 'SLM') {
        this.$message.warning('只能删除手工创建的数据！')
        return
      }
      // this.$confirm(`是否确认删除勾选的${this.selections.length}条数据？`, {
      return this.$confirm(`是否确认删除选择的数据？`, {
        type: 'warning',
        title: '删除'
      }).then(() => {
        return deleteLogicDeleteById(this.selections[0].id).then(res => {
          this.$message.success('删除成功！')
          this.$refs.cTableBox.initTableData()
        })
      })
    },
    // 异常恢复
    handelCancelException() {
      if (!this.singleJudge(this.selections, '恢复', true)) {
        return
      }
      this.$prompt('', '备注', {
        confirmButtonText: '确定',
        closeOnClickModal: false,
        cancelButtonText: '取消',
        inputPattern: /[\S]/,
        inputErrorMessage: '请输入'
      }).then(({ value }) => {
        resumeException({ id: this.selections[0].id, exceptionRemark: value }).then(res => {
          if (res.success) {
            this.refreshTableData()
            this.$message.success('操作成功')
          }
        })
      }).catch(() => {
      })
    },
    // 作废成功
    refreshTableData(v = 'onPage') {
      this.$nextTick(() => {
        this.$refs.cTableBox.initTableData(v)
      })
    },
    // 跳转
    clickToRouterHandle(name) {
      const query = {}
      if (name === 'DecorateAddEdit') {
        query.nowTime = new Date().getTime()
      }
      this.$router.push({ name, query })
    },
    toRouteWithId(name, warnText, noDecorationType) {
      if (!this.singleJudge(this.selections, warnText || '操作', true)) {
        return
      }
      const s = this.selections[0]
      if (name === 'DecorateTaskAdd' && s.state !== 'C') {
        this.$message.warning('终止状态才能新增任务！')
        return
      }
      this.$router.push({ name, query: { id: s.id, constCode: s.constCode, decorationTaskCode: s.decorationTaskCode, type: noDecorationType }})
    },
    // 新增任务
    toAddTask(name) {
      this.$router.push({ name })
    },
    // 详情
    toDetail(row) {
      this.$router.push({ name: 'DecorateDetail', query: { id: row.id, taskCode: row.decorationTaskCode, constCode: row.constCode }})
    },
    // 导出成功
    handleExportSuccess() {
      this.$message.success('导出成功！')
    },
    // 导入成功
    handleImportSuccess() {
      this.$message.success('导入成功！')
    }
  }
}
</script>
